<template>
    <div class="page">
        <div class="scorll">
            <div class="content">
                <p class="topfont">深基坑数据分析</p>
                <p class="mb30">实时监测数据、趋势分析和风险评估</p>
                <el-card class="mb30">
                    <div class="flexbet top">
                        <div class="flexcol">
                            <span class="f20 bold"
                                >阳光城商业中心深基坑项目</span
                            >
                            <span class="subtit"
                                ><i class="el-icon-location"></i
                                >北京市朝阳区建国路88号</span
                            >
                        </div>
                        <ul class="flexbet right">
                            <li v-for="(item, index) in topList" :key="index">
                                <span class="f14">{{ item.name }}</span>
                                <span class="f18" :class="'font' + index">{{
                                    item.val
                                }}</span>
                            </li>
                        </ul>
                    </div>
                </el-card>
                <el-card class="mb30">
                    <div class="flexbet top">
                        <div class="flexrow">
                            <div class="flexcol">
                                <span class="f12">监测点类型</span>
                                <el-select v-model="type" placeholder="请选择">
                                    <el-option
                                        v-for="item in topOpt1"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="flexcol">
                                <span class="f12">监测区域</span>
                                <el-select v-model="area" placeholder="请选择">
                                    <el-option
                                        v-for="item in topOpt2"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="flexcol">
                                <span class="f12">时间范围</span>
                                <el-select
                                    v-model="period"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in topOpt3"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <el-button icon="el-icon-refresh" class="bluebtn"
                            >刷新数据</el-button
                        >
                    </div>
                </el-card>
                <div class="monitorList">
                    <el-card
                        class="boxcard"
                        v-for="(item, index) in monitorList"
                        :class="'bord' + index"
                        :key="index"
                    >
                        <div class="flexbet tit">
                            <span class="black bord">{{ item.name }}</span>
                            <span class="tag" :class="'tag' + index">{{
                                item.statusName
                            }}</span>
                        </div>
                        <div class="flexbet mid">
                            <div class="flexcol">
                                <span
                                    ><span class="bigfont">{{ item.data }}</span
                                    >{{ item.unit }}</span
                                >
                                <div
                                    class="flexrow cent"
                                    :class="
                                        item.changeStatus == 2 ? 'red' : 'green'
                                    "
                                >
                                    <i
                                        v-if="item.changeData"
                                        :class="
                                            item.changeStatus == 2
                                                ? 'el-icon-top'
                                                : 'el-icon-bottom'
                                        "
                                    ></i>
                                    <i v-else class="el-icon-minus"></i>
                                    <div>
                                        <div
                                            v-if="item.changeData"
                                            class="flexcol f14"
                                        >
                                            <span
                                                >较昨日{{
                                                    item.changeStatus == 1
                                                        ? "下降"
                                                        : "上升"
                                                }}</span
                                            >
                                            <span>
                                                {{ item.changeData
                                                }}{{ index == 2 ? "m" : "%" }}
                                            </span>
                                        </div>
                                        <span v-else>较昨日无变化</span>
                                    </div>
                                </div>
                            </div>
                            <el-progress
                                type="circle"
                                :show-text="false"
                                :percentage="item.percent"
                                stroke-width="8"
                                width="60"
                                :color="color[index]"
                            ></el-progress>
                        </div>
                    </el-card>
                </div>
                <el-row class="mb30" :gutter="20">
                    <el-col :span="12">
                        <div class="item card">
                            <div class="title flexbet">
                                <span class="bold">位移趋势分析</span>
                                <ul>
                                    <li
                                        v-for="(item, index) in btns"
                                        :key="index"
                                        class="btntag"
                                        :class="
                                            index == active0 ? 'active0' : ''
                                        "
                                        @click="changeActive0(index)"
                                    >
                                        {{ item }}
                                    </li>
                                </ul>
                            </div>
                            <div
                                id="displacementTrend"
                                style="width: 100%; height: 340px"
                            ></div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="item card">
                            <div class="title flexbet">
                                <span class="bold">监测点分布与状态</span>
                                <span class="rightfont black"
                                    ><span class="circle greenbg"></span
                                    >正常<span class="circle yellowbg"></span
                                    >预警<span class="circle redbg"></span
                                    >异常</span
                                >
                            </div>
                            <div
                                id="pointTrend"
                                style="width: 100%; height: 340px"
                            ></div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="mb30" :gutter="20">
                    <el-col :span="12">
                        <div class="item card">
                            <div class="title flexbet">
                                <span class="bold">地下水位变化</span>
                                <el-select
                                    v-model="waterPeriod"
                                    placeholder="请选择"
                                    class="select120"
                                >
                                    <el-option
                                        v-for="item in periodOpt"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div
                                id="waterTrend"
                                style="width: 100%; height: 340px"
                            ></div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="item card">
                            <div class="title flexbet">
                                <span class="bold">风险评估矩阵</span>
                                <span class="blue"
                                    ><i class="el-icon-download"></i
                                    >导出报告</span
                                >
                            </div>
                            <div
                                id="safeTrend"
                                style="width: 100%; height: 340px"
                            ></div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="mb30" :gutter="20">
                    <div class="card pad20 tablebox">
                        <div class="title flexbet">
                            <span class="bold">监测点详情</span>
                            <div class="flexrow">
                                <el-input
                                    placeholder="搜索监测点..."
                                    prefix-icon="el-icon-search"
                                    v-model="input2"
                                    class="mr20"
                                >
                                </el-input>
                                <el-button class="bluebtn">导出数据</el-button>
                            </div>
                        </div>
                        <el-table :data="tableData" stripe style="width: 100%">
                            <el-table-column
                                prop="id"
                                label="监测点编号"
                                width="100"
                            >
                            </el-table-column>
                            <el-table-column prop="name" label="类型">
                            </el-table-column>
                            <el-table-column prop="location" label="位置">
                            </el-table-column>

                            <el-table-column label="当前值">
                                <template slot-scope="scope">
                                    {{ scope.row.realData + scope.row.unit }}
                                </template>
                            </el-table-column>
                            <el-table-column label="警戒值">
                                <template slot-scope="scope">
                                    {{ scope.row.warningData + scope.row.unit }}
                                </template>
                            </el-table-column>
                            <el-table-column label="预警状态">
                                <template slot-scope="scope">
                                    <el-tag
                                        class="tabletag"
                                        :class="
                                            scope.row.status == 1
                                                ? 'warntag'
                                                : ''
                                        "
                                        effect="dark"
                                        >{{
                                            scope.row.status == 0
                                                ? "正常"
                                                : "预警"
                                        }}</el-tag
                                    >
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="time"
                                label="更新时间"
                                width="160"
                            >
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <span class="blue">详情</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="flexbet bot">
                            <span>显示 1 到 5 条，共 48 条记录</span>
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="100"
                                :pager-count="4"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-row>
                <el-row class="mb30" :gutter="20">
                    <div class="card pad20">
                        <div class="title flexbet">
                            <span class="bold">近期预警信息</span>
                            <span class="blue f14"
                                >查看全部 <i class="el-icon-arrow-right"></i
                            ></span>
                        </div>
                        <div style="width: 100%; height: 340px; padding: 20px">
                            <ul class="msgbox">
                                <li
                                    v-for="(item, index) in msgList"
                                    :key="index"
                                    :class="'msg' + item.status"
                                >
                                    <div
                                        class="iconbox"
                                        :class="'bg' + item.status"
                                    >
                                        <img
                                            class="lefticon"
                                            :src="
                                                '../../../static/pit/status' +
                                                item.status +
                                                '.png'
                                            "
                                        />
                                    </div>
                                    <div class="flexcol">
                                        <span class="black">{{
                                            item.title
                                        }}</span>
                                        <span class="desc">{{
                                            item.desc
                                        }}</span>
                                        <span class="mt10">
                                            <span
                                                class="tag"
                                                :class="'tip' + item.status"
                                                >{{
                                                    item.status == 1
                                                        ? "黄色预警"
                                                        : "信息提示"
                                                }}</span
                                            >
                                            <span class="tag">{{
                                                item.time
                                            }}</span>
                                            <span
                                                class="tag"
                                                :class="'tag' + item.type"
                                                >{{
                                                    item.type == 0
                                                        ? "已处理"
                                                        : "处理中"
                                                }}</span
                                            >
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            color: ["#165dff", "#ff7d00", "#3dd4a7", "#86909c"],
            topList: [
                {
                    name: "监测点数量",
                    val: 48,
                },
                {
                    name: "预警次数",
                    val: 7,
                },
                {
                    name: "数据更新",
                    val: "1分钟前",
                },
                {
                    name: "项目状态",
                    val: "正常",
                },
            ],
            topOpt1: [
                {
                    value: 1,
                    label: "全部类型",
                },
                {
                    value: 2,
                    label: "位移监测",
                },
                {
                    value: 3,
                    label: "沉降监测",
                },
                {
                    value: 4,
                    label: "倾斜监测",
                },
                {
                    value: 5,
                    label: "地下水位",
                },
                {
                    value: 6,
                    label: "支撑轴力",
                },
            ],
            type: 1,
            topOpt2: [
                {
                    value: 1,
                    label: "全部区域",
                },
                {
                    value: 2,
                    label: "东区",
                },
                {
                    value: 3,
                    label: "西区",
                },
                {
                    value: 4,
                    label: "南区",
                },
                {
                    value: 5,
                    label: "北区",
                },
                {
                    value: 6,
                    label: "中区",
                },
            ],
            area: 1,
            topOpt3: [
                {
                    value: 1,
                    label: "最近24小时",
                },
                {
                    value: 2,
                    label: "最近7天",
                },
                {
                    value: 3,
                    label: "最近30天",
                },
                {
                    value: 4,
                    label: "最近90天",
                },
                {
                    value: 5,
                    label: "自定义",
                },
            ],
            period: 1,
            monitorList: [
                {
                    name: "最大水平位移",
                    statusName: "安全",
                    data: 18.2,
                    unit: "mm",
                    changeStatus: 1,
                    changeData: 2.3,
                    percent: 50,
                },
                {
                    name: "最大沉降量",
                    statusName: "预警",
                    data: 26.8,
                    unit: "mm",
                    changeStatus: 2,
                    changeData: 5.7,
                    percent: 90,
                },
                {
                    name: "地下水位",
                    statusName: "正常",
                    data: 5.4,
                    unit: "m",
                    changeStatus: 1,
                    changeData: 0.3,
                    percent: 80,
                },
                {
                    name: "支撑轴力",
                    statusName: "正常",
                    data: 1250,
                    unit: "kN",
                    changeStatus: 0,
                    changeData: 0,
                    percent: 60,
                },
            ],
            totalList: [],
            btns: ["水平位移", "沉降位移"],
            active0: 0,
            periodOpt: [
                {
                    value: 1,
                    label: "近7天",
                },
                {
                    value: 2,
                    label: "近30天",
                },
                {
                    value: 3,
                    label: "近90天",
                },
            ],
            waterPeriod: 1,
            msgList: [
                {
                    status: 1, ////0正常 1预警
                    title: "西区沉降监测点JC-002超过预警值",
                    desc: "当前沉降量26.8mm，超过预警值25mm（预警阈值：25-30mm）",
                    time: "2023-06-15 09:45",
                    type: 1, //0已处理 1处理中
                },
                {
                    status: 1,
                    title: "南区支撑轴力监测点JC-015波动异常",
                    desc: "1小时内支撑轴力波动值超过15%（正常范围：±10%）",
                    time: "2023-06-15 09:45",
                    type: 0,
                },
                {
                    status: 0,
                    title: "监测设备JC-023信号中断",
                    desc: "东区水平位移监测点JC-023设备信号中断，正在排查原因",
                    time: "2025-05-12 10:20",
                    type: 1,
                },
            ],

            tableData: [
                {
                    id: "JC-001",
                    location: "东区南侧",
                    name: "位移监测",
                    realData: 12.5,
                    unit: "mm",
                    warningData: 40,
                    time: "2025-06-15 10:30",
                    status: 0, //0正常 1预警 2异常
                },
                {
                    id: "JC-002",
                    location: "西区北侧",
                    name: "沉降监测",
                    realData: 26.8,
                    unit: "mm",
                    warningData: 30,
                    time: "2025-06-15 10:30",
                    status: 1,
                },
                {
                    id: "JC-003",
                    location: "中区",
                    name: "地下水位",
                    realData: 5.4,
                    unit: "m",
                    warningData: 6.5,
                    time: "2025-06-15 10:30",
                    status: 0,
                },
                {
                    id: "JC-004",
                    location: "南区",
                    name: "支撑轴力",
                    realData: 1250,
                    unit: "kN",
                    warningData: 1800,
                    time: "2025-06-15 10:30",
                    status: 0,
                },
                {
                    id: "JC-005",
                    location: "东区北侧",
                    name: "倾斜监测",
                    realData: 0.08,
                    unit: "°",
                    warningData: 0.3,
                    time: "2025-06-15 10:30",
                    status: 0,
                },
            ],
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.totalList = [
            {
                name: "监测点总数",
                realTimeData: 128,
                unit: "",
                changeStatus: 1, //0降低 1增长
                changeData: 5.2,
                iconUrl: "../../static/pit/location.png",
            },
            {
                name: "报警总数",
                realTimeData: 23,
                unit: "",
                changeStatus: 0, //0降低 1增长
                changeData: 12.3,
                iconUrl: "../../static/pit/warn.png",
            },
            {
                name: "设备在线率",
                realTimeData: 96.8,
                unit: "%",
                changeStatus: 1, //0降低 1增长
                changeData: 2.1,
                iconUrl: "../../static/pit/wifi.png",
            },
            {
                name: "数据采集量",
                realTimeData: 12.5,
                unit: "K",
                changeStatus: 1, //0降低 1增长
                changeData: 8.2,
                iconUrl: "../../static/pit/data.png",
            },
        ];
        this.displacementTrendFn();
        this.waterTrendFn();
        this.safeTrendFn();
        this.pointTrendFn();
    },
    methods: {
        displacementTrendFn() {
            let displacement = this.$echarts.init(
                document.getElementById("displacementTrend")
            );
            displacement.setOption({
                color: ["#4A81FF", "#F53F3F"],
                grid: {
                    left: "2%",
                    right: "2%",
                    top: "10%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "#333",
                    textStyle: {
                        color: "#fff",
                    },
                },
                legend: {
                    top: "0%",
                    left: "center",
                    itemWidth: 35,
                    itemHeight: 10,
                    textStyle: {
                        color: "#7a7b7c",
                    },
                    data: ["最大水平位移(mm)", "警戒值(mm)"],
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            margin: 15, // 调整标签与刻度线之间的距离
                            textStyle: {
                                color: "#7a7b7c",
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#EBEEF5",
                            },
                        },
                        axisTick: {
                            show: false,
                            //alignWithLabel: true,
                        },
                        data: [
                            "06-10",
                            "06-11",
                            "06-12",
                            "06-13",
                            "06-14",
                            "06-15",
                            "06-16",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        max: 40,
                        splitNumber: 8,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#EBEEF5",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#7a7b7c",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "最大水平位移(mm)",
                        type: "line",
                        areaStyle: {
                            color: "#E7EEFF",
                        },
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 3,
                                },
                            },
                        },
                        data: [15.2, 16.8, 17.5, 18.9, 19.5, 18.2, 18],
                    },
                    {
                        name: "警戒值(mm)",
                        type: "line",
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 4,
                                    type: "dotted",
                                },
                            },
                        },
                        // emphasis: {
                        //     focus: "series",
                        // },
                        // showSymbol: false,
                        data: [40, 40, 40, 40, 40, 40, 40],
                    },
                ],
            });
        },
        pointTrendFn() {
            let pointTrend = this.$echarts.init(
                document.getElementById("pointTrend")
            );
            pointTrend.setOption({
                color: ["#00B42A", "#FF7D00", "#F53F3F"],
                grid: {
                    left: "2%",
                    right: "2%",
                    top: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "#333",
                    textStyle: {
                        color: "#fff",
                    },
                    formatter: "{a0} : ({c0})",
                },

                xAxis: {
                    max: 100,
                    splitNumber: 10,
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#EBEEF5",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    max: 100,
                    splitNumber: 10,
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#EBEEF5",
                        },
                    },
                },
                series: [
                    {
                        name: "正常",
                        symbolSize: 17,
                        data: [
                            [20, 20],
                            [20, 45],
                            [20, 70],
                            [40, 25],
                            [40, 50],
                            [40, 75],
                            [60, 20],
                            [60, 45],
                            [60, 70],
                            [80, 25],
                            [80, 50],
                            [80, 75],
                        ],
                        type: "scatter",
                    },
                    {
                        name: "预警",
                        symbolSize: 17,
                        data: [
                            [30, 35],
                            [30, 60],
                            [70, 35],
                            [70, 60],
                        ],
                        type: "scatter",
                    },
                    {
                        name: "报警",
                        symbolSize: 17,
                        data: [[50, 45]],
                        type: "scatter",
                    },
                ],
            });
        },
        changeActive0(index) {
            this.active0 = index;
        },
        waterTrendFn() {
            let waterTrend = this.$echarts.init(
                document.getElementById("waterTrend")
            );
            waterTrend.setOption({
                color: ["rgba(15,198,195)"],
                grid: {
                    left: "6%",
                    right: "4%",
                    top: "2%",
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "#333",
                    textStyle: {
                        color: "#fff",
                    },
                    formatter: "{b0}</br> {a0}: {c0}",
                },
                xAxis: [
                    {
                        type: "category",
                        axisLabel: {
                            margin: 10, // 调整标签与刻度线之间的距离
                            textStyle: {
                                color: "#7a7b7c",
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#EBEEF5",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: [
                            "06-10",
                            "06-11",
                            "06-12",
                            "06-13",
                            "06-14",
                            "06-15",
                            "06-16",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        min: 4,
                        max: 6.5,
                        splitNumber: 5,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#EBEEF5",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#7a7b7c",
                            },
                        },
                    },
                ],
                series: [
                    {
                        type: "bar",
                        emphasis: {
                            focus: "series",
                        },
                        name: "地下水位(m)",

                        data: [6.2, 6, 5.8, 5.9, 5.7, 5.5, 5.4],
                    },
                ],
            });
        },
        safeTrendFn() {
            let safeTrend = this.$echarts.init(
                document.getElementById("safeTrend")
            );
            safeTrend.setOption({
                color: ["#00B42A", "#FF7D00", "#F53F3F"],
                grid: {
                    left: "2%",
                    right: "2%",
                    top: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "#333",
                    textStyle: {
                        color: "#fff",
                    },
                    formatter: "风险等级: {b0}",
                },
                xAxis: {
                    type: "category",
                    splitLine: {
                        //x网格样式
                        show: true,
                        lineStyle: {
                            color: "#E0E6F1",
                            type: "solid",
                            width: "1",
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#EBEEF5",
                        },
                    },
                    axisLabel: {
                        margin: 15, // 调整标签与刻度线之间的距离
                        textStyle: {
                            color: "#7a7b7c",
                        },
                    },
                    // axisTick: {
                    //     alignWithLabel: true,
                    // },
                    data: ["低", "中", "高", "极高"],
                },

                yAxis: {
                    type: "category",

                    splitLine: {
                        //x网格样式
                        show: true,
                        lineStyle: {
                            color: "#E0E6F1",
                            type: "solid",
                            width: "1",
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#EBEEF5",
                        },
                    },
                    axisLabel: {
                        alignWithLabel: true,
                        textStyle: {
                            color: "#7a7b7c",
                        },
                    },
                    axisTick: {
                        alignWithLabel: true,
                    },
                    data: ["低", "中", "高", "极高"],
                },
                series: [
                    {
                        name: "正常",
                        symbolSize: 17,
                        data: [
                            ["低", "中"],
                            ["中", "低"],
                            ["中", "中"],
                        ],
                        type: "scatter",
                    },
                    {
                        name: "预警",
                        symbolSize: 17,
                        data: [
                            ["低", "高"],
                            ["低", "极高"],
                            ["中", "高"],
                            ["中", "极高"],
                            ["高", "低"],
                            ["高", "中"],
                            ["极高", "低"],
                            ["极高", "中"],
                        ],
                        type: "scatter",
                    },
                    {
                        name: "报警",

                        type: "scatter",
                        data: [
                            ["高", "高"],
                            ["高", "极高"],
                            ["极高", "高"],
                        ],
                        symbolSize: function (val) {
                            if (val[1] == "极高") {
                                return 35;
                            }
                            if (val[0] == "极高") {
                                return 22;
                            }
                            return 28;
                        },
                    },
                ],
            });
        },
    },
};
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    background: #f5f5f5;
    padding: 20px 10px;
    .content {
        background: #fff;
        padding: 30px;
        font-size: 16px;
        color: #7a7b7c;
        .card {
            border-radius: 10px;
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    }
}

.flexrow {
    display: flex;
    flex-direction: row;
}
.flexcol {
    display: flex;
    flex-direction: column;
}

.flexbet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.flexwrap {
    display: felx;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.cent {
    align-items: center;
}
.f14 {
    font-size: 14px;
}
.f12 {
    font-size: 12px;
}
.f16 {
    font-size: 16px;
}
.f18 {
    font-size: 18px;
}
.f20 {
    font-size: 20px;
}
.bold {
    font-weight: 800;
}
.mb30 {
    margin-bottom: 30px;
}
.mt10 {
    display: inline-block;
    margin-top: 10px;
}
.mr20 {
    margin-right: 20px;
}

.pad20 {
    padding: 20px;
}
.top {
    align-items: center;
    .subtit {
        color: #7a7b7c;
        margin-top: 5px;
        i {
            margin-right: 5px;
        }
    }
    .right {
        li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px 15px;
            background: #f2f3f5;
            margin-left: 20px;
            border-radius: 10px;
            color: #7a7b7c;
            .f18 {
                font-weight: 800;
                margin-top: 5px;
            }
            .font0 {
                color: #165dff;
            }
            .font1 {
                color: #ff7d00;
            }
            .font2,
            .font3 {
                color: #00b42a;
            }
        }
    }
    .el-select {
        margin-top: 10px;
        width: 150px;
        padding-right: 10px;
    }
}
.monitorList {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 20px 0;

    .boxcard {
        width: 24%;
        //color: #7a7b7c;
        border-radius: 15px;
        .tit {
            align-items: center;
            .tag {
                border-radius: 30px;
                width: 50px;
                text-align: center;
                font-size: 14px;
                padding: 3px 0;
            }
            .tag0 {
                color: #165dff;
                background: #e7eeff;
            }
            .tag1 {
                color: #ff7d00;
                background: #fff2e5;
            }
            .tag2 {
                color: #3dd4a7;
                background: #e7f9f9;
            }
            .tag3 {
                color: #86909c;
                background: #f3f4f5;
            }
        }
        .mid {
            align-items: flex-end;
            // padding: 20px 0;
            // border-bottom: 1px solid #f2f6fc;
        }

        .bigfont {
            font-size: 36px;
            color: #000;
            font-weight: 800;
            margin-right: 10px;
        }
    }
    .bord0 {
        border-left: 5px solid #165dff;
    }
    .bord1 {
        border-left: 5px solid #ff7d00;
    }
    .bord2 {
        border-left: 5px solid#3dd4a7;
    }
    .bord3 {
        border-left: 5px solid #86909c;
    }
}

.item {
    padding: 20px;
    height: 400px;
}
.title {
    width: 100%;
    margin-bottom: 20px;
    height: 40px;
    align-items: center;
    .bold {
        color: #000;
        font-size: 20px;
    }
    .rightfont {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
.msgbox {
    height: 340px;
    li {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;

        font-size: 14px;
        .iconbox {
            width: 30px;
            height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-right: 10px;
        }
        .lefticon {
            width: 20px;
        }
        .black {
            display: inline-block;
        }

        .tag {
            padding: 5px 15px;
            background: #f3f4f6;
            font-size: 12px;
            margin-right: 20px;
            border-radius: 15px;
        }
        .tag0 {
            background: #dcfce7 !important;
        }
        .tag1 {
            background: #fef9c3 !important;
        }
        .tip0 {
            color: #86909c;
        }
        .tip1 {
            color: #ff7d00;
            background: #ffecd9 !important;
        }
    }
    .msg1 {
        border-left: 4px solid #ff7d00;
        background: #fff8f2;
    }
    .msg0 {
        border-left: 4px solid #86909c;
        background: #f9f9fa;
    }
}

.btntag {
    display: inline-block;
    // padding: 3px 12px;
    // background: #f2f3f5;
    color: #999;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

.active0 {
    // background: #e7eeff !important;
    color: #2762ef !important;
}

.black {
    color: #000;
}
.red {
    color: #f53f3f;
}
.green {
    color: #00b42a;
}
.blue {
    color: #2762ef;
}
.greenbg {
    background: #00b42a;
}
.yellowbg {
    background: #ff7d00;
}
.redbg {
    background: #f53f3f;
}
.circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

.select {
    margin-right: 10px;
    width: 150px;
}
.tabletag {
    border-radius: 30px;
    width: 45px;
    padding: 0;
    text-align: center;
    height: 25px;
    line-height: 22px;
    background: #dcfce7;
    border: none;
    color: #6c6b6b;
}
.warntag {
    color: #4d4204 !important;
    background: #f7f2be !important;
}
/deep/.el-table thead th {
    background: #f2f2f2 !important;
    color: #333;
    font-weight: 400;
}
.topfont {
    color: #000;
    font-weight: 800;
    font-size: 30px;
}
.tablebox {
    .bot {
        color: #333;
        font-size: 14px;
        margin-top: 20px;
    }
}
.bluebtn {
    background: #165dff;
    color: #fff;
    font-size: 16px;
    height: 40px;
    border-radius: 10px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #165dff;
}
.select120 {
    width: 120px;
}
</style>
